<template>
    <el-button-group class="el-button-group">
      <!-- 左边按钮，独立点击事件 -->
      <el-button type="primary" @click="handleButtonClick">创作者中心</el-button>
      
      <!-- 右边按钮，鼠标悬停时显示下拉菜单 -->
      <el-dropdown trigger="hover">
        <el-button type="primary" class="el-icon-arrow-down">
          <i >
            <svg width="15" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" 
            class="unfold12-icon" data-v-17cc1c49=""><path d="M2.45025 4.82383C2.17422 4.49908 2.40501 4 2.83122 4H9.16878C9.59499 4 9.82578 4.49908 9.54975 4.82382L6.38097 8.5518C6.1813 8.7867 5.8187 8.7867 5.61903 8.5518L2.45025 4.82383Z" fill="white"></path></svg></i>
        </el-button>
        <template #dropdown>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(action, index) in actions" :key="index" @click="handleAction(action)">
            <i :class="action.icon"></i> {{ action.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
    </template>
      </el-dropdown>
    </el-button-group>
  </template>
  
  <script setup lang="ts">
  import router from '@/router';
import { ref } from 'vue'
  
  interface Action {
    label: string
    icon: string
  }
  
  const actions = ref<Action[]>([
    { label: '写文章', icon: 'el-icon-edit' },
    { label: '写小说', icon: 'el-icon-novel' },
    { label: '写笔记', icon: 'el-icon-notebook' },
    { label: '写代码', icon: 'el-icon-code' },
    { label: '草稿箱', icon: 'el-icon-folder' }
  ])
  
  const handleAction = (action: Action) => {
    console.log(`Action: ${action.label}`)
    if (action.icon === 'el-icon-novel') {
      router.push('/book_create')
    }else if (action.icon === 'el-icon-edit') {
      router.push('/article_write')
    }
  }
  
  const handleButtonClick = () => {
    router.push('/writer_center')
    console.log('Creator Center button clicked')
  }

  </script>
  
  <style scoped>
  /* 样式可按需调整 */
  .el-button-group {
    min-width: 150px;
  }
  .el-icon-arrow-down{
    width: 15px;
  }
  </style>
  